import { messages } from "share/common";
import React, { Component } from "react";
import "styles/enterprise-manage/set-of-books-company/common-card.scss";
import SVGIcon from "components/SVGIcon";
import { Icon } from "antd";

class CommonCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }

  handleCardClick = () => {
    const { control, singleItem } = this.props;
    if (!control) {
      this.setState({ active: !this.state.active });
    } else {
      this.props.onItemClick && this.props.onItemClick(singleItem);
    }
  };

  handleCardEdit = (e) => {
    e.stopPropagation();
    e.preventDefault();
    const { singleItem } = this.props;
    this.props.onItemEdit && this.props.onItemEdit(singleItem);
  };

  handleCardView = (e) => {
    e.stopPropagation();
    e.preventDefault();
    const { singleItem } = this.props;
    this.props.onItemView && this.props.onItemView(singleItem);
  };

  renderResourceName = (resourceName) => {
    const { keyword } = this.props;
    if (keyword && resourceName.toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
      return (
        <span
          dangerouslySetInnerHTML={{
            __html: resourceName.replace(new RegExp(`${keyword.toLowerCase()}`, "img"), function (arg1) {
              return `<span style='color: #4B8DFF'>${arg1}</span>`;
            }),
          }}
        />
      );
    }
    return resourceName;
  };

  render() {
    const { active } = this.state;
    const {
      titleKey,
      infoList,
      singleItem,
      statusKey,
      propActive,
      onItemEdit,
      onItemView,
      onlyLeft,
      needInfoHighLight,
    } = this.props;
    return (
      <div
        className={`common-single-info-card ${active || propActive ? "active" : "deactivate"} ${
          onlyLeft ? "only-left" : ""
        }`}
        onClick={this.handleCardClick}
      >
        <div className="title-and-edit-box">
          <div className="card-title">{this.renderResourceName(singleItem[titleKey])}</div>
        </div>
        <div className="card-info">
          {infoList.map((item) => {
            return (
              <div className="single-info">
                <span>{item.name}: </span>
                <span className="info-text">
                  {needInfoHighLight
                    ? this.renderResourceName(singleItem[item.key]) || "-"
                    : singleItem[item.key] || "-"}
                </span>
              </div>
            );
          })}
        </div>
        <div className="card-status">
          <div className={`dot ${singleItem[statusKey] ? "active" : "deactivate"}`} />
          <div className="dot-text">
            {singleItem[statusKey] ? messages("basic-5.key940") /*已启用*/ : messages("common.disabling") /*已禁用*/}
          </div>
        </div>
        <div className="bottom-detail">
          {onItemEdit && (
            <div className="operate-btn" onClick={this.handleCardEdit}>
              {messages("common.edit") /*编辑*/}
            </div>
          )}
          {onItemView && (
            <div className="operate-btn" onClick={this.handleCardView}>
              {messages("basic-5.key277") /*查看详情*/}
            </div>
          )}
        </div>
      </div>
    );
  }
}

CommonCard.propTypes = {};

export default CommonCard;
